<template>
	<view>
		
		<u-popup :show="addMemShow" :round="20" mode="bottom">
			<view class="popup-v">
				<view class="popup-header">
					<view class="close u-flex" @click="addMemShow = false" >
						<u-icon name="close"></u-icon>
					</view>
					<view class="title">
						添加成员
					</view>
				</view>
				<view class="popup-c">
					<view class="edit-form">
						<view class="u-flex form-item">
							<view class="">
								登录账号
							</view>
							<view class="u-flex" @click="show7 = true">
								<view class="text-gray">
									查询
								</view>
								<view class="u-flex">
									<u-icon name="search" size="44"></u-icon>
								</view>
							</view>
						</view>
						<view class="u-flex form-item">
							<view class="">
								成员手机
							</view>
							<input type="text" placeholder="请输入成员手机号码" v-model="addForm.phone"></input>
						</view>
						<view class="u-flex form-item">
							<view class="">
								成员姓名
							</view>
							<input type="text" placeholder="请输入成员姓名" v-model="addForm.name"></input>
						</view>
						<view class="u-flex form-item" @click="show3=true">
							<view class="">
								部门
							</view>
							<view class="u-flex">
								<view class="mr-10">
									{{addForm.bm}}
								</view>
								<view class="u-flex">
									<u-icon name="arrow-right"></u-icon>
								</view>
							</view>
						</view>
						<view class="u-flex form-item" @click="show4=true">
							<view class="">
								角色
							</view>
							<view class="u-flex">
								<view class="mr-10">
									{{addForm.js}}
								</view>
								<view class="u-flex">
									<u-icon name="arrow-right"></u-icon>
								</view>
							</view>
						</view>
					</view>
					<view class="footer u-flex">
						<view class="">
							<u-button  :customStyle="cancelBtn" @click="addMemShow = false">
								取消
							</u-button>
						</view>
						<view>
							<u-button type="primary" :customStyle="orangeBtn" @click="save">
								保 存
							</u-button>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default{
		data(){
			return {
				addMemShow:true,
			}
		},
		methods: {
			
		},
	}
</script>

<style lang="scss" scoped>
	.popup-v {
		height: calc(95vh - env(safe-area-inset-bottom));
		.popup-header {
			padding: 30rpx 60rpx;
			display: flex;
			justify-content: center;
	
			.close {
				width:
					40rpx;
			}
	
			.title {
				font-size: 36rpx;
				font-weight: 700;
				width: 100%;
				text-align: center;
			}
		}
	
		.edit-form {
			padding: 0 60rpx;
	
			.form-item {
				background-color: #fff;
				justify-content: space-between;
				padding: 30rpx;
				margin-bottom: 30rpx;
				text-align: right;
				border: 1px solid #f5f5f5;
				border-radius: 8rpx;
			}
		}
	
		.popup-c {
			max-height: 100%;
			overflow: auto;
	
			.popup-content {
				padding: 0 60rpx 60rpx 60rpx;
	
				.title {
					margin-bottom: 30rpx;
					border-left: 6rpx solid #fd7400;
					padding: 0 10rpx;
	
				}
	
				.tagA {
					text-align: center;
					padding: 20rpx 0;
					margin-bottom: 30rpx;
					border-radius: 8rpx;
					background-color: #f5f5f5;
				}
			}
	
			.footer {
				padding: 60rpx;
				width: 100%;
				justify-content: space-between;
				position: fixed;
				bottom: 0;
				background-color: #fff;
				margin-top: 60rpx
			}
		}
	}
	
</style>